<template>
  <view>
    <head-box></head-box>
    <view class="tab-botton label">
      <view class="flex justify-end">
        <checkbox-group @change="allChoose">
          <label>
            <checkbox value="all"  :checked="allChecked"></checkbox> {{allChecked?'取消':'全选'}}
          </label>
        </checkbox-group>
      </view>
      <checkbox-group class="block" @change="changeCheckbox">
        <view v-for="(item,index) in checkboxData" :key="index" class="checked-btn">
          <label>
            <checkbox :value="item.value" :checked="checkedArr.includes(item.value)"></checkbox>
            <text>{{item.label}}</text>
          </label>
        </view>
      </checkbox-group>

      <u-button hover-class="none" plain :custom-style="customStyle" @click="onsubMit">
        <text class="text">提交</text>
      </u-button>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
import {editAreaCodeTags,getAreaCodeTags} from '@/api/group'
import {getDictItemstList} from '@/api/dict'
export default {
  data() {
    return {
      //按钮样式
      customStyle: {
        width: '455rpx',
        height: '60rpx',
        background: 'linear-gradient(180deg, #82A5FF, #386FFF)',
        borderRadius: '30rpx',
      },
      isChecked:false,
      checkboxData:[],//数据
      checkedArr:[], //复选框选中的值
      allChecked:false //是否全选
    };
  },
  onLoad(){
    this.getDictItems()

  },
  methods: {
    getAreaCodeTags(){
      getAreaCodeTags().then(res=>{
        const {result,code} = res
        if(result.length){
          const list = []
          this.checkboxData.filter((item,index)=>{
            const split = result.split ( ',' )
            split.map(child=>{
              if(item.value===child){
                list.push(child)
              }
            })
          })
          if(list.length){
            this.checkedArr = list
            if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
              this.allChecked=true;
            }else{
              this.allChecked=false;
            }
          }
        } else {


        }
      }).catch(e=>{
        console.log ( e )
      })
    },
    //地区编码
    async getDictItems() {
      const { code, result } = await getDictItemstList({
        dictCode: 'new_area_code',
        sign: '',
      })
      if (code === 0) {
        const paramsList = []
        if (result.length) {
          result.map((item, index) => {
            const { text: label, value } = item
            paramsList.push({
              value,
              label,
              index,
              checked:false
            })
          })
          this.checkboxData = paramsList
          this.checkboxData.map(item=>{
            this.$set(item,'checked',false)
          })
          if(this.checkboxData.length){
            await  this.getAreaCodeTags()
          }
        }
      }
    },
    //提交 数据
    onsubMit(){
      let str = ''
      if(this.checkedArr.length===1){
        str = this.checkedArr.join('')
      } else {
        str = this.checkedArr.join(',')
      }
      this.$api.showLoading({title:'操作中...'})
      editAreaCodeTags(str).then(res=>{
        this.$api.hideLoading()
        const {code,message,result} =res
        if(code===200){
          this.$api.msg(result)
          this.$api.leftBack()
        }else {
          this.$api.msg(message)
        }
      }).catch(e=>{
        this.$api.hideLoading()
        console.log ( e )
      })
    },
    // 单个复选框事件
    checkboxChange(e) {
      let values = e.detail.value;
      if(values[0]==1){
        this.isChecked=true;
      }else{
        this.isChecked=false;
      }
    },
    // 多选复选框改变事件
    changeCheckbox(e){
      this.checkedArr = e.detail.value;
      // 如果选择的数组中有值，并且长度等于列表的长度，就是全选
      if(this.checkedArr.length>0 && this.checkedArr.length==this.checkboxData.length){
        this.allChecked=true;
      }else{
        this.allChecked=false;
      }
    },
    // 全选事件
    allChoose(e){
      let chooseItem = e.detail.value;
      // 全选
      if(chooseItem[0]=='all'){
        this.allChecked=true;
        for(let item of this.checkboxData){
          let itemVal=String(item.value);
          if(!this.checkedArr.includes(itemVal)){
            this.checkedArr.push(itemVal);
          }
        }
      }else{
        // 取消全选
        this.allChecked=false;
        this.checkedArr=[];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import"@/style/mySelectChecked"
</style>
